内容评论标签的风格制作

评论的标签如下:

  1. {qb:comment name="xxxxx" rows='5'}
  2.             HTML代码片段
  3. {/qb:comment}

评论涉及到的元素有

{posturl} 这个是代表POST评论内容到哪个网址

{pageurl} 这个是代表显示更多页评论的地址

基本流程, 一个是评论区的内容. 一个是提交按钮.一个是数据提交处理事件

内容评论标签的风格制作 - 图1

其中

  1. <textarea name="textfield" id="comment_content"></textarea>

这个是评论区的内容. 这里的元素有一个 id="comment_content" 方便JS事件获取里边的内容

面下面这个就是评论按钮

  1. <input type="button" name="Submit" value="发表留言" onclick="post_commentPc()">

这里有一个点击事件 post_commentPc()

他是JS处理评论事件

下面这段就是表单POST的JS处理事件

  1. <script type="text/javascript">
  2.     var posturl = "{posturl}"; //POST数据到指定网址
  3.     var commentpage = 1; //默认显示第一页的数据
  4.     var havepost = false;    //做个标志,不要重复提交数据
  6.     //POST评论内容
  7.     function post_commentPc(){
  8.         if(havepost===true){
  9.             layer.alert("请不要重复提交数据");
  10.             return ;
  11.         }
  12.         var contents = $('#comment_content').val();  //获取评论内容
  13.         if(contents==''){
  14.             layer.alert("请输入评论内容！");
  15.         }else{
  16.             havepost = true;  //做个标志,不要重复提交
  17.             $.post(
  18.                 posturl,     //提交到指定网址
  19.                 {content:contents},  //提交的评论内容
  20.                 function(res,status){                    
  21.                     if(res.code==0){   //评论成功
  22.                         $('#comment_content').val('');        //清空评论区的内容
  23.                         $('#show_comment').html(res.data);    //把返回的新的评论数据重新显示在网页上
  24.                         commentpage = 1;  //恢复到第一页
  25.                         layer.msg('发表成功！');
  26.                         HiddenShowMoreComment();  //这里统计是否有分页,这个可删除
  27.                     }else{    //评论失败
  28.                         layer.alert('评论发表失败:'+res.msg);
  29.                     }
  30.                     havepost = false; //允许再次发表评论
  31.                 }
  32.             );                
  33.         }
  34.     }
  35. </script>

发表评论这一块的完整代码如下:

  1.         <div class="PostComment">
  2.             <div class="head">我要留言</div>
  3.             <dl>
  4.                 <dt>内容:</dt>
  5.                 <dd>
  6.                     <textarea name="textfield" id="comment_content"></textarea>
  7.                 </dd>
  8.             </dl>
  9.             <div class="sub">
  10.                 <input type="button" name="Submit" value="发表留言" onclick="post_commentPc()">
  11.             </div>
  12.         </div>
  13. <script type="text/javascript">
  14.     var posturl = "{posturl}"; //POST数据到指定网址
  15.     var commentpage = 1; //默认显示第一页的数据
  16.     var havepost = false;    //做个标志,不要重复提交数据
  18.     //POST评论内容
  19.     function post_commentPc(){
  20.         if(havepost===true){
  21.             layer.alert("请不要重复提交数据");
  22.             return ;
  23.         }
  24.         var contents = $('#comment_content').val();  //获取评论内容
  25.         if(contents==''){
  26.             layer.alert("请输入评论内容！");
  27.         }else{
  28.             havepost = true;  //做个标志,不要重复提交
  29.             $.post(
  30.                 posturl,     //提交到指定网址
  31.                 {content:contents},  //提交的评论内容
  32.                 function(res,status){                    
  33.                     if(res.code==0){   //评论成功
  34.                         $('#comment_content').val('');        //清空评论区的内容
  35.                         $('#show_comment').html(res.data);    //把返回的新的评论数据重新显示在网页上
  36.                         commentpage = 1;  //恢复到第一页
  37.                         layer.msg('发表成功！');
  38.                         HiddenShowMoreComment();  //这里统计是否有分页,这个可删除
  39.                     }else{    //评论失败
  40.                         layer.alert('评论发表失败:'+res.msg);
  41.                     }
  42.                     havepost = false; //允许再次发表评论
  43.                 }
  44.             );                
  45.         }
  46.     }
  47. </script>

下面这个图是显示评论内容的处理

内容评论标签的风格制作 - 图2

代码如下:

id="show_comment" 给DIV定义一个容器存放更多页的评论显示

{volist name="listdb" id="rs"} 代码段 {/volist} 这里是把默认第一页的评论循环显示出来

onclick="Show_MoreComment()" 这个是点击事件,显示更多评论

{pageurl} 这个是评论更多数据的调用地址

  1.         <div class="ShowComment">
  2.             <div class="head">用户留言</div>            
  3.             <div id="show_comment">
  4.             {volist name="listdb" id="rs"}
  5.                 <div class="ListComment">
  6.                     <dl>
  7.                         <dt><a href="{:get_url('user',$rs.uid)}" target="_blank"><img src="{$rs.icon}" onerror="this.src='__STATIC__/images/nobody.gif'"></a></dt>
  8.                         <dd>{$rs.content}</dd>
  9.                     </dl>
  10.                     <div class="moreinfo">
  11.                         称呼:{$rs.username} 日期:{$rs.time}
  12.                         <A HREF="#">删除</A> 
  13.                     </div>
  14.                 </div>
  15.             {/volist}
  16.             </div>
  17.             <div class="ShowMoreComment" style="text-align:center;margin:10px;"><button style="padding:8px;background:Orange;border:1px solid #fff;color:#fff;" type="butter" onclick="Show_MoreComment()">更多评论 <i class="fa fa-angle-double-down"></i></button></div>
  18.         </div>
  19.         <br>
  21. <script type="text/javascript">
  22.     //显示更多数据
  23.     function Show_MoreComment(){
  24.         commentpage++;
  25.         $.get('{pageurl}?page='+commentpage,function(res){
  26.             if(res.code==0){
  27.                 if(res.data==''){
  28.                     layer.msg('显示完了！');
  29.                     $('.ShowMoreComment button').hide();;
  30.                 }else{            
  31.                     $('#show_comment').append(res.data);   //更多评论数据调用成功,追加显示
  32.                 }
  33.             }else{
  34.                 layer.msg(res.msg,{time:2500});
  35.             }
  36.         });
  37.     }
  39.     //判断是否有更多页数据
  40.     function HiddenShowMoreComment(){
  41.             var Comments=$('#show_comment .ListComment').length;
  42.             if(parseInt(Comments/{$cfg_array.rows})<1){
  43.                 $('.ShowMoreComment').hide();
  44.             }else{
  45.                 $('.ShowMoreComment').show();
  46.             }
  47.     }
  49.     HiddenShowMoreComment();
  50. </script>

评论的完整代码如下

  1.         <div class="PostComment">
  2.             <div class="head">我要留言</div>
  3.             <dl>
  4.                 <dt>内容:</dt>
  5.                 <dd>
  6.                     <textarea name="textfield" id="comment_content"></textarea>
  7.                 </dd>
  8.             </dl>
  9.             <div class="sub">
  10.                 <input type="button" name="Submit" value="发表留言" onclick="post_commentPc()">
  11.             </div>
  12.         </div>
  13. <script type="text/javascript">
  14.     var posturl = "{posturl}"; //POST数据到指定网址
  15.     var commentpage = 1; //默认显示第一页的数据
  16.     var havepost = false;    //做个标志,不要重复提交数据
  18.     //POST评论内容
  19.     function post_commentPc(){
  20.         if(havepost===true){
  21.             layer.alert("请不要重复提交数据");
  22.             return ;
  23.         }
  24.         var contents = $('#comment_content').val();  //获取评论内容
  25.         if(contents==''){
  26.             layer.alert("请输入评论内容！");
  27.         }else{
  28.             havepost = true;  //做个标志,不要重复提交
  29.             $.post(
  30.                 posturl,     //提交到指定网址
  31.                 {content:contents},  //提交的评论内容
  32.                 function(res,status){                    
  33.                     if(res.code==0){   //评论成功
  34.                         $('#comment_content').val('');        //清空评论区的内容
  35.                         $('#show_comment').html(res.data);    //把返回的新的评论数据重新显示在网页上
  36.                         commentpage = 1;  //恢复到第一页
  37.                         layer.msg('发表成功！');
  38.                         HiddenShowMoreComment();  //这里统计是否有分页,这个可删除
  39.                     }else{    //评论失败
  40.                         layer.alert('评论发表失败:'+res.msg);
  41.                     }
  42.                     havepost = false; //允许再次发表评论
  43.                 }
  44.             );                
  45.         }
  46.     }
  47. </script>
  48.         <div class="ShowComment">
  49.             <div class="head">用户留言</div>            
  50.             <div id="show_comment">
  51.             {volist name="listdb" id="rs"}
  52.                 <div class="ListComment">
  53.                     <dl>
  54.                         <dt><a href="{:get_url('user',$rs.uid)}" target="_blank"><img src="{$rs.icon}" onerror="this.src='__STATIC__/images/nobody.gif'"></a></dt>
  55.                         <dd>{$rs.content}</dd>
  56.                     </dl>
  57.                     <div class="moreinfo">
  58.                         称呼:{$rs.username} 日期:{$rs.time}
  59.                         <A HREF="#">删除</A> 
  60.                     </div>
  61.                 </div>
  62.             {/volist}
  63.             </div>
  64.             <div class="ShowMoreComment" style="text-align:center;margin:10px;"><button style="padding:8px;background:Orange;border:1px solid #fff;color:#fff;" type="butter" onclick="Show_MoreComment()">更多评论 <i class="fa fa-angle-double-down"></i></button></div>
  65.         </div>
  66.         <br>
  68. <script type="text/javascript">
  69.     //显示更多数据
  70.     function Show_MoreComment(){
  71.         commentpage++;  //第几页
  72.         $.get('{pageurl}?page='+commentpage,function(res){
  73.             if(res.code==0){
  74.                 if(res.data==''){
  75.                     layer.msg('显示完了！');
  76.                     $('.ShowMoreComment button').hide();;
  77.                 }else{            
  78.                     $('#show_comment').append(res.data);  //更多评论数据调用成功,追加显示
  79.                 }
  80.             }else{
  81.                 layer.msg(res.msg,{time:2500});
  82.             }
  83.         });
  84.     }
  86.     //判断是否有更多页数据 , 并不重要
  87.     function HiddenShowMoreComment(){
  88.             var Comments=$('#show_comment .ListComment').length;
  89.             if(parseInt(Comments/{$cfg_array.rows})<1){
  90.                 $('.ShowMoreComment').hide();
  91.             }else{
  92.                 $('.ShowMoreComment').show();
  93.             }
  94.     }
  96.     HiddenShowMoreComment();
  97. </script>